<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>问题管理系统 - 高保真原型</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        }
        .prototype-section {
            margin-bottom: 40px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 12px;
        }
        .prototype-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 20px;
            color: #1f2937;
            display: flex;
            align-items: center;
        }
        .prototype-title i {
            margin-right: 12px;
            color: #3b82f6;
        }
        .iframe-container {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            margin-bottom: 20px;
        }
        .iframe-header {
            background: #374151;
            color: white;
            padding: 12px 20px;
            font-size: 14px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-between;
        }
        .iframe-header .dots {
            display: flex;
            gap: 6px;
        }
        .iframe-header .dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }
        .dot-red { background: #ef4444; }
        .dot-yellow { background: #eab308; }
        .dot-green { background: #22c55e; }
        iframe {
            border: none;
            display: block;
        }
        .mobile-frame {
            width: 360px;
            height: 640px;
        }
        .web-frame {
            width: 100%;
            height: 800px;
        }
        .grid-2 {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }
        @media (max-width: 768px) {
            .grid-2 {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body class="bg-gray-100">
    <!-- Header -->
    <div class="bg-gradient-to-r from-blue-600 to-blue-700 text-white py-8 px-6 shadow-lg">
        <div class="max-w-7xl mx-auto">
            <h1 class="text-4xl font-bold mb-2">个人问题管理系统</h1>
            <p class="text-blue-100 text-lg">高保真原型设计 - Web端 & 移动端</p>
            <div class="mt-4 flex gap-4 text-sm">
                <span><i class="fas fa-mobile-alt mr-2"></i>移动端 (360x640)</span>
                <span><i class="fas fa-desktop mr-2"></i>Web端 (响应式)</span>
                <span><i class="fas fa-palette mr-2"></i>Tailwind CSS + FontAwesome</span>
            </div>
        </div>
    </div>

    <div class="max-w-7xl mx-auto p-6">
        <!-- Mobile Prototypes -->
        <div class="prototype-section">
            <div class="prototype-title">
                <i class="fas fa-mobile-alt"></i>
                移动端原型 (Android 360x640)
            </div>
            
            <div class="grid-2">
                <!-- Mobile Home -->
                <div class="iframe-container">
                    <div class="iframe-header">
                        <span>主页 - 今日任务概览</span>
                        <div class="dots">
                            <div class="dot dot-red"></div>
                            <div class="dot dot-yellow"></div>
                            <div class="dot dot-green"></div>
                        </div>
                    </div>
                    <iframe src="mobile-home.html" class="mobile-frame"></iframe>
                </div>

                <!-- Mobile Tasks -->
                <div class="iframe-container">
                    <div class="iframe-header">
                        <span>任务列表 - 多状态分组</span>
                        <div class="dots">
                            <div class="dot dot-red"></div>
                            <div class="dot dot-yellow"></div>
                            <div class="dot dot-green"></div>
                        </div>
                    </div>
                    <iframe src="mobile-tasks.html" class="mobile-frame"></iframe>
                </div>

                <!-- Mobile Collect -->
                <div class="iframe-container">
                    <div class="iframe-header">
                        <span>快速收集 - 多种输入方式</span>
                        <div class="dots">
                            <div class="dot dot-red"></div>
                            <div class="dot dot-yellow"></div>
                            <div class="dot dot-green"></div>
                        </div>
                    </div>
                    <iframe src="mobile-collect.html" class="mobile-frame"></iframe>
                </div>

                <!-- Mobile Knowledge -->
                <div class="iframe-container">
                    <div class="iframe-header">
                        <span>知识库 - 卡片流展示</span>
                        <div class="dots">
                            <div class="dot dot-red"></div>
                            <div class="dot dot-yellow"></div>
                            <div class="dot dot-green"></div>
                        </div>
                    </div>
                    <iframe src="mobile-knowledge.html" class="mobile-frame"></iframe>
                </div>

                <!-- Mobile Profile -->
                <div class="iframe-container">
                    <div class="iframe-header">
                        <span>个人中心 - 设置与统计</span>
                        <div class="dots">
                            <div class="dot dot-red"></div>
                            <div class="dot dot-yellow"></div>
                            <div class="dot dot-green"></div>
                        </div>
                    </div>
                    <iframe src="mobile-profile.html" class="mobile-frame"></iframe>
                </div>

                <!-- Mobile Detail -->
                <div class="iframe-container">
                    <div class="iframe-header">
                        <span>问题详情 - 完整信息展示</span>
                        <div class="dots">
                            <div class="dot dot-red"></div>
                            <div class="dot dot-yellow"></div>
                            <div class="dot dot-green"></div>
                        </div>
                    </div>
                    <iframe src="mobile-detail.html" class="mobile-frame"></iframe>
                </div>
            </div>
        </div>

        <!-- Web Prototypes -->
        <div class="prototype-section">
            <div class="prototype-title">
                <i class="fas fa-desktop"></i>
                Web端原型 (桌面响应式)
            </div>

            <!-- Web Dashboard -->
            <div class="iframe-container mb-6">
                <div class="iframe-header">
                    <span>仪表盘 - 数据概览与快速入口</span>
                    <div class="dots">
                        <div class="dot dot-red"></div>
                        <div class="dot dot-yellow"></div>
                        <div class="dot dot-green"></div>
                    </div>
                </div>
                <iframe src="web-dashboard.html" class="web-frame"></iframe>
            </div>

            <!-- Web Kanban -->
            <div class="iframe-container mb-6">
                <div class="iframe-header">
                    <span>看板视图 - 拖拽式状态流转</span>
                    <div class="dots">
                        <div class="dot dot-red"></div>
                        <div class="dot dot-yellow"></div>
                        <div class="dot dot-green"></div>
                    </div>
                </div>
                <iframe src="web-kanban.html" class="web-frame"></iframe>
            </div>

            <!-- Web Knowledge -->
            <div class="iframe-container mb-6">
                <div class="iframe-header">
                    <span>知识库 - 分类树与内容列表</span>
                    <div class="dots">
                        <div class="dot dot-red"></div>
                        <div class="dot dot-yellow"></div>
                        <div class="dot dot-green"></div>
                    </div>
                </div>
                <iframe src="web-knowledge.html" class="web-frame"></iframe>
            </div>
        </div>

        <!-- Design Specifications -->
        <div class="bg-white rounded-lg p-8 shadow-lg">
            <h2 class="text-2xl font-bold mb-6 text-gray-800">
                <i class="fas fa-info-circle text-blue-500 mr-3"></i>设计规范说明
            </h2>
            
            <div class="grid md:grid-cols-2 gap-6">
                <div>
                    <h3 class="font-bold text-lg mb-3 text-gray-700">
                        <i class="fas fa-palette text-purple-500 mr-2"></i>设计系统
                    </h3>
                    <ul class="space-y-2 text-sm text-gray-600">
                        <li><i class="fas fa-check text-green-500 mr-2"></i>Tailwind CSS 响应式框架</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>FontAwesome 6.4.0 图标库</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>Unsplash 真实图片资源</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>现代化渐变与阴影效果</li>
                    </ul>
                </div>

                <div>
                    <h3 class="font-bold text-lg mb-3 text-gray-700">
                        <i class="fas fa-mobile-alt text-blue-500 mr-2"></i>移动端特性
                    </h3>
                    <ul class="space-y-2 text-sm text-gray-600">
                        <li><i class="fas fa-check text-green-500 mr-2"></i>360x640 Android 标准尺寸</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>底部导航栏 (5个入口)</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>卡片式布局与左滑操作</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>快速收集与语音/拍照入口</li>
                    </ul>
                </div>

                <div>
                    <h3 class="font-bold text-lg mb-3 text-gray-700">
                        <i class="fas fa-desktop text-orange-500 mr-2"></i>Web端特性
                    </h3>
                    <ul class="space-y-2 text-sm text-gray-600">
                        <li><i class="fas fa-check text-green-500 mr-2"></i>左侧导航 + 主内容区布局</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>仪表盘数据可视化</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>看板拖拽式交互</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>知识库分类树结构</li>
                    </ul>
                </div>

                <div>
                    <h3 class="font-bold text-lg mb-3 text-gray-700">
                        <i class="fas fa-code text-red-500 mr-2"></i>技术实现
                    </h3>
                    <ul class="space-y-2 text-sm text-gray-600">
                        <li><i class="fas fa-check text-green-500 mr-2"></i>纯HTML + Tailwind CSS</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>iframe 平铺展示所有页面</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>可直接用于开发参考</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>无占位符，真实UI资源</li>
                    </ul>
                </div>
            </div>

            <div class="mt-8 p-4 bg-blue-50 rounded-lg border-l-4 border-blue-500">
                <p class="text-sm text-gray-700">
                    <i class="fas fa-lightbulb text-yellow-500 mr-2"></i>
                    <strong>使用说明：</strong>所有页面均为独立HTML文件，可单独打开预览。
                    本页面使用iframe方式平铺展示所有原型，方便对比查看移动端与Web端的设计差异。
                </p>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <div class="bg-gray-800 text-white py-6 mt-12">
        <div class="max-w-7xl mx-auto px-6 text-center">
            <p class="text-sm">个人问题管理系统 - 高保真原型设计</p>
            <p class="text-xs text-gray-400 mt-2">基于需求文档生成 | Tailwind CSS + FontAwesome</p>
        </div>
    </div>
</body>
</html>
